<style scoped>
    .search-form {
        padding: 15px;
    }

    .echart-class {
        /* min-height: 850px; */
    }

    .all {
        text-align: right;
        padding-top: 10px;
        padding-right: 15px;
    }
</style>
<style>
    body .ivu-modal .ivu-select-dropdown {
        position: fixed !important;
    }
</style>
<template>
    <div>
        <product-title></product-title>
        <div class="common-box-body">
            <Row>
                <Form :model="searchForm" class="search-form">
                    <Col :xs="24" :sm="12" :md="12" :lg="7">
                    <Form-item label="投保时间">
                        <DatePicker type="daterange" @on-change="rangeChange" transfer placement="bottom-start" v-model="searchForm.daterange" placeholder="请选择"></DatePicker>
                    </Form-item>
                    </Col>
                    <Col :xs="24" :sm="12" :md="12" :lg="7">
                    <Form-item label="选择供应商">
                        <Select v-model="searchForm.cid" clearable filterable placeholder="选择保险公司" :transfer=true>
                            <Option value="">全部</Option>
                            <Option v-for="(option, index) in comoptions" :value="option.cid" :key="option.cid">{{option.name}}</Option>
                        </Select>
                    </Form-item>
                    </Col>
                    <Col :xs="24" :sm="12" :md="12" :lg="7">
                    <Form-item label="选择机构">
                        <Select ref="orgselect" clearable filterable placeholder="请输入分支机构" v-model="searchForm.yun_org_mid" :transfer=true>
                            <Option value="">全部</Option>
                            <Option v-for="item in orglist" :value="item.id" :key="item.id">{{item.shortn}}</Option>
                        </Select>
                    </Form-item>
                    </Col>
                    <Col :xs="24" :sm="12" :md="12" :lg="3">
                    <Form-item label="">
                        <Select clearable filterable placeholder="请输入险种" v-model="searchForm.insurance_mid" :transfer=true>
                            <Option value="">全部</Option>
                            <Option v-for="item in prolist" :value="item.id" :key="item.id">{{item.name}}</Option>
                        </Select>
                    </Form-item>
                    </Col>
                    <Col :xs="24" :sm="24" :md="24" :lg="2" offset="22">
                    <Form-item style="padding-right:0px;">
                        <Button size="large" class="fr" type="primary" icon="ios-search" @click="search">搜索</Button>
                    </Form-item>
                    </Col>
                </Form>
            </Row>
            <div class="all">
                <CountTo :endVal="balance" :mainStyle="mainStyle" :countStyle="countStyle" :decimals="6">
                    <span slot="leftText">总标准保费：&nbsp;</span>
                    <span slot="rightText">&nbsp;万元({{policy_count}}件)</span>
                </CountTo>
            </div>
            <div class="echart-class" id="E-echart">

            </div>
        </div>
    </div>
</template>
<script>
    import productTitle from '../../components/productTitle'
    import {
        statisticsCom
    } from '../../api/policy'
    import {
        getListByName
    } from '../../api/yun_org'
    import {
        productGetAll
    } from '../../api/product'
    import {
        parteGetByName
    } from '../../api/parter'
    import CountTo from '../../components/CountTo.vue'
    import * as _ from 'lodash'
    import calc from 'calculatorjs'
    import echarts from 'echarts'
    export default {

        data() {
            return {
                comoptions: [],
                balance: 0,
                policy_count: 0,
                echartHeight: 850,
                mainStyle: {
                    fontSize: '16px',
                    color: '#ed3f14'
                },
                countStyle: {
                    fontSize: '30px',
                    color: '#ed3f14'
                },
                searchForm: {
                    daterange: [],
                    yun_org_mid: '',
                    cid: '',
                },
                orglist: [],
                prolist: [],
                echartObj: {},
                edata: [],
                color: ['#e0f6e0', '#b0e7b0', '#89da8e', '#77d47f', '#3fd960', '#5dcb68', '#2acd4c', '#38af2f',
                    '#2c992c', '#277b31'
                ]
            }
        },
        components: {
            productTitle,
            CountTo
        },
        mounted() {
            let visiteVolume = echarts.init(document.getElementById('E-echart'));
            this.echartObj = visiteVolume
            let xAxisData = [];
            let data1 = [];
            let data2 = [];


            const options = {
                color: this.color,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '50',
                    left: '2%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    name: '标准保费（万元）',
                    type: 'value',
                    splitNumber: 9,
                    boundaryGap: [0, 0.01],
                    nameTextStyle: {
                        color: '#000',
                        fontWeight: 'bold',
                        fontSize: '14'
                    },

                },
                yAxis: {
                    name: '供应商',
                    type: 'category',
                    data: [],
                    nameTextStyle: {
                        color: '#000',
                        fontWeight: 'bold',
                        fontSize: '14'
                    }
                },
                series: [{
                    name: '总保费',
                    type: 'bar',
                    data: [

                    ],
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            //formatter:'{c}万元({@count}件)',
                            formatter: function (params) {
                                console.log(params)
                                return params.data.value + '万元 (' + params.data.count + '件)'
                            },
                            color: '#000'
                        },

                    },
                    // barWidth:50,
                    // barGap:20,
                    // barCategoryGap:20 
                }]
            };

            visiteVolume.setOption(options, true);

            window.addEventListener('resize', function () {
                visiteVolume.resize();
            });
            this.getData()
            this.orglistinit()
            this.getProList()
            this.cominit()
        },
        created() {

        },

        methods: {
            cominit() {
                console.log(this.$refs)
                new Promise((resolve, reject) => {
                    let _params = {
                        name: ''
                    }
                    parteGetByName(_params).then(response => {
                        console.log(response.data)
                        if (response.data.err == 0) {
                            this.comoptions = response.data.data;
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            getProList() {
                new Promise((resolve, reject) => {
                    productGetAll().then(response => {
                        if (response.data.err == 0) {
                            this.prolist = response.data.data
                        }
                        resolve()
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            orglistinit() {
                new Promise((resolve, reject) => {
                    let _params = {
                        name: ''
                    }
                    getListByName(_params).then(response => {
                        console.log(response.data)
                        if (response.data.err == 0) {
                            this.orglist = response.data.data;
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            rangeChange(date) {
                this.searchForm.insure_date_start = date[0]
                this.searchForm.insure_date_end = date[1]

            },
            getData() {
                this.echartObj.showLoading();
                new Promise((resolve, reject) => {
                    statisticsCom(this.searchForm).then(response => {
                        console.log(response.data)
                        if (response.data.err == 0) {
                            this.echartObj.hideLoading();
                            this.balance = response.data.data.sum ? calc.div(response.data.data.sum,
                                1000000) : 0
                            this.policy_count = response.data.data.count ? response.data.data.count : 0
                            let total = []
                            let _data = response.data.data.source_data ? response.data.data.source_data :
                                []
                            console.log(_data)

                            if (_data.length > 0) {
                                let _max = _.maxBy(_data, function (o) {
                                    return o.value;
                                })
                                let len = parseInt((_max.value / 1000000)).toString().length
                                let _radio = len > 3 ? len - 2 : len - 1
                                let max_num = Math.ceil((_max.value / 1000000) / (Math.pow(10, _radio))) *
                                    (Math.pow(10, _radio))
                                max_num = max_num / 10
                                _data.forEach(element => {
                                    let _pareInt = parseInt((element.value / 1000000) / max_num)
                                    let _obj = {
                                        normal: {
                                            color: this.color[_pareInt]
                                        }
                                    }
                                    total.push({
                                        'value': calc.div(element.value, 1000000),
                                        'name': element.name,
                                        'count': element.count,
                                        'itemStyle': _obj
                                    })

                                });
                            } else {
                                total = []
                            }

                            let _length = total.length
                            this.echartHeight = (_length > 0) ? _length * 65 + 50 : 500

                            this.edata = total.length > 0 ? total : [{}]
                            this.echartObj.setOption({
                                yAxis: {
                                    data: response.data.data.com ? response.data.data.com : [''],
                                },
                                series: [{
                                    data: this.edata
                                }]
                            })
                            this.resizeWorldMapContainer(this.echartHeight)
                            this.echartObj.resize();
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            search() {
                this.getData()
            },
            resizeWorldMapContainer(heigth) {
                document.getElementById('E-echart').style.height = heigth + 'px';
            }
        }
    }
</script>